<template>
  <a-card title="便捷导航" :bodyStyle=bodyStyle>
    <a slot="extra" v-if="hasPerm('navigation:edit')" @click="setIsEdit(isEdit)">{{isEdit ? '完成' : '编辑'}}</a>
    <a-row :gutter="24" v-if="isEdit">
      <a-col :md="6" :sm="24">
        <div class="add" @click="$refs.Form.open()">
          <a-icon type="plus"/>
          新建
        </div>
      </a-col>
      <a-col v-for="item in data" :key=item.id :md="6" :sm="24" style="margin-bottom: 24px">
        <a-card>
          <div class="icon" @click="deleteObj(item.id)">
            <a-icon type="close"/>
          </div>
          <template slot="actions" class="ant-card-actions">
            <a-icon type="left-square"  @click="handleSort(item, 'up')"/>
            <a-icon type="right-square"  @click="handleSort(item, 'down')"/>
            <a-icon type="edit" @click="$refs.Form.open(item)"/>
          </template>
          <a-card-meta :title="item.title" :description="item.desc">
            <a-avatar
              slot="avatar"
              :src="item.logo"
            />
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" v-else>
      <a-col v-for="item in data" :key=item.id :md="6" :sm="24" style="margin-bottom: 24px">
        <a-card>
          <template slot="actions" class="ant-card-actions">
            <a v-for="link in item.links" :href="link.url" target="_blank"> {{ link.name }} </a>
          </template>
          <a-card-meta :title="item.title" :description="item.desc">
            <a-avatar
              slot="avatar"
              :src="item.logo"
            />
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
    <s-form ref="Form" @ok="handleOk"/>
  </a-card>
</template>

<
<script>
  import sForm from './NavForm'
  import * as api from '@/api/system/navManage'

  export default {
    components: {
      sForm
    },

    data() {
      return {
        bodyStyle: { paddingBottom: 0, minHeight: '200px' },
        isEdit: false,
        data: []
      }
    },

    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        api.getList().then((res) => {
          this.data = res.data.rows
        })
      },
      setIsEdit(isEdit) {
        this.loadData()
        this.isEdit = !isEdit
      },
      handleSort(item, sort) {
        api.updatePartObj({ id: item.id, sort: sort }).then((res) => {
          this.loadData()
        })
      },
      deleteObj(id) {
        api.deleteObj(id).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        })
      },
      handleOk() {
        this.loadData()
      }
    }
  }
</script>
<style scoped>
  .add {
    display: flex;
    height: 142px;
    border-radius: 2px;
    border: 1px dashed #d9d9d9;
    font-size: 12px;
    cursor: pointer;
    margin-top: 0;
  }

  .add:hover {
    border: 1px dashed #1890ff;
    color: #1890ff;
  }

  .icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    padding: 8px;
    font-size: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
  }

  .icon:hover {
    color: #ff4d4f;
  }
</style>